<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        span{display: block}
    </style>
</head>
<body>
    <div id="app1">
        <span>1-{{name}}</span>
        <span>2-{{AddName()}}</span>
        <span>3--{{AddName()}}</span>
        <span>4-{{AddName2}}</span>
        <span>4-{{AddName2}}</span>
        <span>5-{{time}}</span>
        <span>6-{{num}}</span>
    </div>
    <script>
        var app1 = new Vue({
            el:"#app1",
            data:{
                name:"linchuan",
                num:1
            },
            methods: {//方法,没有缓存,每次都调用
                AddName:function(){
                    console.log("AddName被调用");
                    return "hello " + this.name;
                }
            },
            computed: {//计算,带缓存的，在数据的基础上进行依赖,依赖的值不改变就不调用
                // AddName2:function(){
                //     console.log("Addname2被调用")
                //     return "hello " +this.name;
                // },
                AddName2:{
                    get:function(){
                        console.log("AddName2 被调用");
                        return "hi " + this.name;
                    },
                    set:function(name){
                        this.name = name;
                    }
                },
                time:function(){
                    console.log("time 被调用");
                    return new Date();
                }
            },
            watch: {//监测,数据改变进行的操作，异步调用
                name:function(){
                    console.log("监测到name发生改变");
                    this.num++;
                }
            },
        })
    </script>
</body>
</html>